<!DOCTYPE html>
<style>
  body {
    height: 2000px;
    width: 2000px;
  }
</style>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script>
  var browserZoomFactor = 1.25;
  var pageScaleFactor = 2;
  var scrollbarWidthCSSPixels = 15 / pageScaleFactor;
  var scrollbarHeightCSSPixels = 15 / pageScaleFactor;

  function viewport() {
    return window.visualViewport;
  }

  async_test(function(t) {
    window.onload = t.step_func(function() {
      // TODO(ymalik): Remove hook to internals to pinch-zoom here and browser
      // zoom below. This will be required to upstream to w3c repo.
      internals.setPageScaleFactor(pageScaleFactor);

      // Verify viewport dimensions exclude scrollbar.
      assert_equals(
          viewport().width,
          800 / pageScaleFactor - scrollbarWidthCSSPixels,
          "Width with pinch-zoom");
      assert_equals(
          viewport().height,
          600 / pageScaleFactor - scrollbarHeightCSSPixels,
          "Height with pinch-zoom");

      // Apply browser zoom.
      if (window.testRunner)
        testRunner.setPageZoomFactor(browserZoomFactor);

      // Since the scrollbars don't change size to the user as we zoom, they're
      // actuall smaller in CSS pixels.
      scrollbarWidthCSSPixels /= browserZoomFactor;
      scrollbarHeightCSSPixels /= browserZoomFactor;

      // Verify scrollbar exclusion with browser zoom.
      assert_equals(
          viewport().width, 
          800 / pageScaleFactor / browserZoomFactor - scrollbarWidthCSSPixels,
          "Width with pinch-zoom and browser zoom");
      assert_equals(
          viewport().height,
          600 / pageScaleFactor / browserZoomFactor - scrollbarHeightCSSPixels,
          "Height with pinch-zoom and browser zoom");
      t.done();
    });
  }, 'Verify viewport dimensions exclude scrollbars.');
</script>
